<style scoped lang="less">
.chart {
  margin-top: -40px;
}
</style>
<template>
  <iot-blk class="today-blk" title="TOP3报警趋势" :moreType="0">
    <div class="chart" id="weekChart"></div>
  </iot-blk>
</template>
<script>
import HighCharts from "highcharts";
import { mapState } from "vuex";
export default {
  name: "IOTWeek",
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["scale"]),
    fillOpacity() {
      let opacity = 0;
      switch (this.type) {
        case "fireControl":
        case "fire":
        case "pool":
        case "chargingStation":
          opacity = 0;
          break;
        default:
          opacity = 0.3;
          break;
      }
      return opacity;
    },
  },
  watch: {
    scale() {
      this.renderChart();
    },
  },
  data() {
    return {
      loading: false,
      chartData: null,
    };
  },
  methods: {
    renderChart() {
      let that = this;
      let width = this.scale * 390;
      let height = this.scale * 240;
      let data = this.chartData;
      let options = {
        credits: {
          enabled: false,
        },
        colors: ["#5AD8A6", "#F6BD16", "#5B8FF9", "#9270CA"],
        chart: {
          type: "spline",
          width: width,
          height: height,
          backgroundColor: "transparent",
          spacing: 0,
          margin: [50 * this.scale, 0, 30 * this.scale, 50 * this.scale],
        },
        title: {
          text: "",
        },
        xAxis: {
          categories: data.categories,
          title: {
            text: null,
          },
          labels: {
            style: {
              color: "#AFECFF",
              fontSize: 12 * this.scale,
            },
          },
          lineColor: "#85b4d0",
        },
        yAxis: {
          title: {
            text: null,
          },
          labels: {
            style: {
              color: "#AFECFF",
              fontSize: 12 * this.scale,
            },
          },
          minorGridLineWidth: 0,
          lineWidth: 0,
          tickWidth: 0,
          tickPosition: "inside",
          tickmarkPlacement: "between",
          tickColor: "#AFECFF",
          gridLineWidth: 1,
          gridLineColor: "#57789a",
          tickInterval: 10,
        },
        legend: {
          enabled: true,
          align: "right",
          float: true,
          verticalAlign: "top",
          itemStyle: {
            color: "#AFECFF",
            fontSize: 12 * this.scale + "px",
          },
          itemHoverStyle: {
            color: "#ffffff",
          },
          itemMarginBottom: 5 * this.scale,
          squareSymbol: false,
          symbolWidth: 24 * this.scale,
          // symbolHeight: 2*this.scale,
          // symbolPadding: 5*this.scale,
          // symbolRadius: 2*this.scale,
          lineHeight: 0,
          width: "64%",
        },
        tooltip: {
          shared: true,
        },
        plotOptions: {
          spline: {
            dataLabels: {
              enabled: false, // dataLabels设为true
              style: {
                color: "#fff",
                fonstSize: 12 * this.scale,
              },
            },
            marker: {
              enabled: true,
              // radius: 4*this.scale,
              lineWidth: 1,
            },
          },
        },
        series: data.series,
      };
      HighCharts.chart("weekChart", options);
    },
    setChartData() {
      let categories = this.data.map((item) => item.date);
      let series = [];
      series = [
        {
          name: "消防通道",
          data: this.data.map((item) => item.weekPassWayCount),
        },
        {
          name: "脱岗离岗",
          data: this.data.map((item) => item.weekLeaveCount),
        },
        {
          name: "火焰报警",
          data: this.data.map((item) => item.weekFireCount),
        },
      ];
      this.chartData = {
        categories: categories,
        series: series,
      };
    },
  },
  mounted() {
    this.setChartData();
    if (this.chartData) {
      this.renderChart();
    }
  },
};
</script>
